<template>
  <div ref="earthContainer" class="earth-background"></div>
</template>

<script>
import { Scene,EarthLayer,LineLayer } from '@antv/l7'
import { Earth } from '@antv/l7-maps';
export default {
  name: 'EarthBackground',
  mounted() {
    this.initEarth()
  },
  beforeDestroy() {
    if (this.scene) {
      this.scene.destroy()
    }
  },
  methods: {
    async initEarth() {
      try {
        // 创建 L7 场景
        this.scene = new Scene({
          id: this.$refs.earthContainer,
          logoVisible: false,
          map: new Earth({}),
          pitch: 45,
        })

        function step() {
          scene.map.rotateY({
            option: {
              force: true,
              reg: 45,
            },
          });
          requestAnimationFrame(step);
        }

        // 地球模式下背景色默认为 #000 通过 setBgColor 方法我们可以设置可视化层的背景色
        this.scene.setBgColor('#000');

        const earthLayer = new EarthLayer().source('https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*3-3NSpqRqUoAAAAAAAAAAAAAARQnAQ', {
            parser: {
            type: 'image',
            },
        })
        .color('#2E8AE6')
        .shape('base')
        .style({
            globalOptions: {
            ambientRatio: 0.6, // 环境光
            diffuseRatio: 0.4, // 漫反射
            specularRatio: 0.1, // 高光反射
            },
        })
        .animate({
            duration: 10000,
            loop: true,
            easing: 'linear',
        });
        
        const atomLayer = new EarthLayer().color('#2E8AE6').shape('atomSphere').style({
            // 可以控制发光程度
            opacity: 1,
        });

        this.scene.on('loaded', () => {
            //   console.log('地球加载完成')
            this.scene.addLayer(earthLayer)
            this.scene.addLayer(atomLayer)
            step()
        })

      } catch (error) {
        console.error('初始化地球背景失败:', error)
        // 如果初始化失败，使用纯色背景作为备选方案
        this.fallbackBackground()
      }
    },

    createEarthEffect() {
      // 创建一个简单的地球效果，使用 CSS 3D 和 Canvas
      const container = this.$refs.earthContainer

      // 创建 Canvas 元素
      const canvas = document.createElement('canvas')
      canvas.width = container.offsetWidth
      canvas.height = container.offsetHeight
      canvas.style.width = '100%'
      canvas.style.height = '100%'
      container.appendChild(canvas)

      const ctx = canvas.getContext('2d')
      const centerX = canvas.width / 2
      const centerY = canvas.height / 2
      const radius = Math.min(centerX, centerY) * 0.8

      let rotation = 0

      const drawEarth = () => {
        ctx.clearRect(0, 0, canvas.width, canvas.height)

        // 绘制地球主体
        ctx.save()
        ctx.translate(centerX, centerY)
        ctx.rotate(rotation)

        // 创建地球渐变
        const gradient = ctx.createRadialGradient(0, 0, 0, 0, 0, radius)
        gradient.addColorStop(0, '#4a90e2')
        gradient.addColorStop(0.7, '#1e3a8a')
        gradient.addColorStop(1, '#0f172a')

        ctx.fillStyle = gradient
        ctx.beginPath()
        ctx.arc(0, 0, radius, 0, Math.PI * 2)
        ctx.fill()

        // 绘制大陆轮廓（简化版）
        ctx.fillStyle = 'rgba(34, 139, 34, 0.6)'
        ctx.beginPath()
        ctx.arc(radius * 0.3, 0, radius * 0.2, 0, Math.PI * 2)
        ctx.fill()

        ctx.beginPath()
        ctx.arc(-radius * 0.4, radius * 0.2, radius * 0.15, 0, Math.PI * 2)
        ctx.fill()

        // 添加大气层效果
        ctx.strokeStyle = 'rgba(100, 149, 237, 0.3)'
        ctx.lineWidth = 2
        ctx.beginPath()
        ctx.arc(0, 0, radius + 3, 0, Math.PI * 2)
        ctx.stroke()

        ctx.restore()

        rotation += 0.005
        requestAnimationFrame(drawEarth)
      }

      drawEarth()

      // 响应窗口大小变化
      const resizeObserver = new ResizeObserver(() => {
        canvas.width = container.offsetWidth
        canvas.height = container.offsetHeight
      })
      resizeObserver.observe(container)
    },

    fallbackBackground() {
      const container = this.$refs.earthContainer
      container.style.background = 'radial-gradient(circle at center, #1e3a8a 0%, #0f172a 100%)'
      container.style.animation = 'rotate 60s linear infinite'
    }
  }
}
</script>

<style scoped>
.earth-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
}

.earth-background :deep(.l7-canvas) {
  width: 100% !important;
  height: 100% !important;
}

.earth-background :deep(.l7-control-container) {
  display: none;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>
